// 注册页面
import React, { Component } from 'react';
import qrcode from '../../assets/image/qrcode.png';
import './style/Register.scss' ;
import {} from '@primer/octicons-react'
export default class Register extends Component {
  constructor(props){
    super(props)
    this.state={
     
    }
  }
    // 获取输入数据
    setValue = (e) =>{
      this.setState({
          [e.target.name]:e.target.value
      })
    }
    submitSigUpInfo = (e) => {
      e.preventDefault();
      // 将表单数据转换为查询参数格式、
      const params = new URLSearchParams();
      params.append("account",this.state.account);
      params.append("nickname",this.state.nickname);
      params.append("tel",this.state.tel);
      params.append("adminPwd",this.state.adminPwd);
      // 请求注册接口
      React.axios.post(`/store-manage/gw1901/admin_sign-up.php`,params).then(res=>{
        if(res.data.includes("管理员账号注册成功")){
          // 提示服务器返回信息
          alert(res.data)
          // 请求数据用户名的接口
          React.axios.post(`/store-manage/gw1901/admin_nickname.php?account=${this.state.account}`).then(res =>{
            // 通过会话存储设置的昵称
            sessionStorage.setItem('nickname',res.data);
            // 执行方法跳转到管理首页
            this.props.Orthos()
          })
        }
        // 提示服务器返回的错误
        else {
          alert(res.data)
        }
      })
    }
    render() {
        return (
          <form
          autoComplete="off"
          onSubmit={this.submitSigUpInfo}
          >
            <div className="Register">
                {/* 注册信息区域 */}
                <div className="Register_left">
                  {/* 用户名 */}
                  <div className="input-group mb-3">
                    <input 
                    type="text"  
                    name="account"
                    onChange={this.setValue}
                    placeholder="填写一个独一无二的英文名" 
                    />
                  </div>
                  {/* 昵称 */}
                  <div className="input-group mb-3">
                    <input 
                    type="text"  
                    name="nickname"
                    placeholder="希望别人怎么称呼你" 
                    onChange={this.setValue}
                    />
                  </div>
                  {/* 手机号 */}
                  <div className="input-group mb-3">
                    <input 
                    type="text" name="tel" onChange={this.setValue} placeholder="给个便于联系你的手机号码" /> 
                    </div>
                  {/* 密码 */}
                  <div className="input-group mb-3">
                    <input type="text" name="adminPwd" onChange={this.setValue} placeholder="输入一个别人猜不到的密码" />
                  </div>
                  {/* 密码确认 */}
                  <div className="input-group mb-3">
                    <input type="text" placeholder="怕你的密码错误所以请再输入一次" />
                  </div>
                  <p>
                  已经拥有账号，前往 <button onClick={this.props.Switchover}>登陆</button> 登陆系统？
                  </p>
                  {/* 注册按钮 */}
                  <button type="submit" 
                  className="btn btn-primary btn-lg btn-block"
                  >注册账号</button>
                </div>
                {/* 关注我们 */}
                <div className="Register_right">
                  <p>关注我们的企业微信公众号获取最新企业咨询或通过以下方式联系我们。</p>
                  邮箱：
                  <br/>
                  <span>1871220032@qq.com</span>
                  <br/>
                  手机：
                  <br/>
                  <span>18286392405</span>
                  {/* 二维码 */}
                  <img src={qrcode} alt="加载中......"/>
                </div>
      </div> 
      </form>      
        )
    }
}
